<div
  class="tw-w-full tw-max-w-4xl tw-p-6 sm:tw-p-8 tw-bg-background tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300 tw-flex tw-flex-col lg:tw-flex-row tw-gap-6 tw-items-center"
>
  <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-4 sm:tw-gap-5 tw-w-full lg:tw-w-auto">
    <div class="tw-text-main tw-text-lg sm:tw-text-xl tw-font-medium tw-leading-6 sm:tw-leading-7">
      {{ title() }}
    </div>

    <div
      class="tw-text-main tw-text-sm sm:tw-text-base tw-font-normal tw-leading-normal"
      *ngIf="description()"
    >
      {{ description() }}
    </div>
    @if (benefits().length > 0) {
      <div class="tw-flex tw-flex-col tw-gap-4 sm:tw-gap-5">
        @for (benefit of benefits(); track $index) {
          <div class="tw-flex tw-items-start tw-gap-3">
            <div
              class="tw-size-8 sm:tw-size-9 tw-bg-secondary-100 tw-rounded-full tw-flex tw-justify-center tw-items-center tw-flex-shrink-0"
            >
              <div
                class="tw-text-center tw-text-main tw-text-sm sm:tw-text-base tw-font-medium tw-leading-normal"
              >
                {{ $index + 1 }}
              </div>
            </div>
            <div class="tw-flex-1 tw-pt-1 sm:tw-pt-1.5 tw-flex tw-flex-col tw-gap-1">
              <div class="tw-text-main tw-text-sm sm:tw-text-base tw-font-medium tw-leading-normal">
                {{ benefit[0] }}
              </div>
              <div class="tw-text-main tw-text-xs tw-font-normal tw-leading-none">
                {{ benefit[1] }}
              </div>
            </div>
          </div>
        }
      </div>
    }

    <div class="tw-flex tw-justify-start" *ngIf="buttonText() && buttonAction()">
      <button
        (click)="buttonAction()()"
        bitButton
        buttonType="primary"
        type="button"
        class="tw-px-3 tw-py-1.5 sm:tw-px-4 tw-rounded-full tw-text-sm sm:tw-text-base"
      >
        <i [class]="buttonIcon() + ' tw-mr-2'" *ngIf="buttonIcon()"></i>
        {{ buttonText() }}
      </button>
    </div>
  </div>

  <div class="tw-hidden lg:tw-block tw-flex-shrink-0" *ngIf="videoSrc() || icon()">
    <div class="tw-size-64 xl:tw-size-80 tw-relative">
      @if (videoSrc()) {
        <video
          class="tw-size-full tw-rounded-lg"
          [src]="videoSrc()"
          autoplay
          loop
          muted
          playsinline
          aria-hidden="true"
        ></video>
      } @else if (icon()) {
        <div
          class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
        >
          <bit-icon
            [icon]="icon()"
            class="tw-size-16 xl:tw-size-24 tw-text-muted"
            aria-hidden="true"
          ></bit-icon>
        </div>
      }
    </div>
  </div>

  <div class="tw-flex lg:tw-hidden tw-w-full tw-justify-center" *ngIf="videoSrc() || icon()">
    <div class="tw-size-48 sm:tw-size-64 tw-relative">
      @if (videoSrc()) {
        <video
          class="tw-size-full tw-rounded-lg"
          [src]="videoSrc()"
          autoplay
          loop
          muted
          playsinline
          aria-hidden="true"
        ></video>
      } @else if (icon()) {
        <div
          class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
        >
          <bit-icon
            [icon]="icon()"
            class="tw-size-12 sm:tw-size-16 tw-text-muted"
            aria-hidden="true"
          ></bit-icon>
        </div>
      }
    </div>
  </div>
</div>
